// 最佳实践 // 标签位置
<template>
  <el-button @click="graphAddPort" type="primary" style="margin: 10px"
    >创建链接桩</el-button
  >
  <div id="container"></div>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { Graph, DataUri, Shape } from "@antv/x6";
import { onMounted, ref } from "vue";

let graph = null;

Shape.Rect.define({
  shape: "my-rect",
  width: 180,
  height: 80,
  ports: {
    groups: {
      in: {
        position: "top",
        label: {
          position: "top",
        },
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: "#31d0c6",
            strokeWidth: 2,
            fill: "#fff",
          },
        },
      },
      out: {
        position: "bottom",
        label: {
          position: "bottom",
        },
        attrs: {
          circle: {
            r: 6,
            magnet: true,
            stroke: "#31d0c6",
            strokeWidth: 2,
            fill: "#fff",
          },
        },
      },
    },
  },
});

const graphAddPort = () => {
  ElMessage({
    message: "创建链接桩",
    type: "success",
  });
  graph.addNode({
    x: 60,
    y: 50,
    shape: "my-rect",
    label: "In Ports & Out Ports",
    ports: [
      {
        id: "port1",
        group: "in",
      },
      {
        id: "port2",
        group: "in",
      },
      {
        id: "port3",
        group: "in",
      },
      {
        id: "port4",
        group: "out",
      },
      {
        id: "port5",
        group: "out",
      },
    ],
  });
};

const renderGraph = () => {
  graph = new Graph({
    container: document.getElementById("container"),
    width: 800,
    height: 600,
    panning: true,
    mousewheel: true,
    // 设置画布背景颜色
    background: {
      color: "#F2F7FA",
    },
  });

  //创建流程图数据
  const data = {};

  graph.fromJSON(data); // 渲染元素
  graph.centerContent(); // 居中显示
};

onMounted(() => {
  renderGraph();
});
</script>
